<div nz-row style="padding-left:24px;">
    <div style="overflow:auto;padding:24px 8px;border-right: 1px solid #e6ebef;" #mydetailsContent nz-col nzSpan="7">
      <h4>按访问量排行</h4>
      <nz-spin [nzSpinning]="isSpinning.spin1">
        <div (click)="selectGeoListItem(item)" class="custom-default-list" [ngClass]="{'selected': item.select}" *ngFor="let item of geoListData">
          <span title="{{item.geo}}" class="left" style="width:200px;">{{item.geo}}</span>
          <span class="right">
            <span>{{item.count}} ({{item.percent}}%)</span>
            <i class="anticon anticon-right"></i>
          </span>
        </div>
      </nz-spin>
   
    </div>
    <div style="overflow:auto;padding:24px 16px;" #mydetailsContent nz-col nzSpan="17">
      <div nz-row>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" [nzSpan]="24">
          <nz-card nzType="inner" nzTitle="访问速度" [nzExtra]="extra_key_perf_Template">
            <nz-spin *ngIf="geoListData.length>0" [nzSpinning]="isSpinning.spin2">
              <app-custom-highchart [config]="key_perf_config"></app-custom-highchart>
            </nz-spin>
          </nz-card>
          <ng-template #extra_key_perf_Template >
            <app-time-choice-panel (selectOver)="selectOver($event,10)"></app-time-choice-panel>
          </ng-template>
        </div>
      </div>
      <div nz-row>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" [nzSpan]="24">
  
          <nz-card nzType="inner" [nzTitle]="jsCardTemplate" [nzExtra]="extralJsCardTemplate">
            <nz-spin *ngIf="geoListData.length>0" [nzSpinning]="isSpinning.spin3">
              <app-custom-highchart [config]="js_config"></app-custom-highchart>
            </nz-spin>
          </nz-card>
          <ng-template #jsCardTemplate>
            JS错误率 
            <nz-tooltip [nzTitle]="'发生错误的次数/访问量'" [nzPlacement]="'top'">
              <i nz-tooltip class="anticon anticon-question-circle"></i>
            </nz-tooltip>
          </ng-template>
          <ng-template #extralJsCardTemplate>
            <app-time-choice-panel (selectOver)="selectOver($event,20)"></app-time-choice-panel>
          </ng-template>
        </div>
      </div>
      <div nz-row>
        <div nz-col class="gutter-row" style="margin-bottom:24px;" [nzSpan]="24">
  
          <nz-card nzType="inner" [nzTitle]="'成功率'" [nzExtra]="extralApiCardTemplate">
            <nz-spin *ngIf="geoListData.length>0" [nzSpinning]="isSpinning.spin4">
              <app-custom-highchart  [config]="api_config"></app-custom-highchart>
            </nz-spin>
          </nz-card>
          <ng-template #extralApiCardTemplate>
            <app-time-choice-panel (selectOver)="selectOver($event,30)"></app-time-choice-panel>
          </ng-template>
        </div>
      </div>
    </div>
  </div>

  